<template>
  <div ref="bpmnContainer" class="bpmn-container" />
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'

export default {
  name: 'BpmnModelerComponent',
  mounted() {
    this.initBpmn()
  },
  beforeDestroy() {
    if (this.modeler) {
      this.modeler.destroy()
    }
  },
  methods: {
    initBpmn() {
      this.modeler = new BpmnModeler({
        container: this.$refs.bpmnContainer
      })

      // 初始化时可以加载一个空的 BPMN XML 或者已有的 XML 文件
      const emptyDiagram = `<?xml version="1.0" encoding="UTF-8"?>
      <bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                        xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
                        xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
                        xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
                        xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
                        xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
                        id="Definitions_1"
                        targetNamespace="http://bpmn.io/schema/bpmn">
        <bpmn:process id="Process_1" isExecutable="false">
          <bpmn:startEvent id="StartEvent_1"/>
        </bpmn:process>
        <bpmndi:BPMNDiagram id="BPMNDiagram_1">
          <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
            <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
              <dc:Bounds x="173" y="102" width="36" height="36"/>
            </bpmndi:BPMNShape>
          </bpmndi:BPMNPlane>
        </bpmndi:BPMNDiagram>
      </bpmn:definitions>`

      this.modeler.importXML(emptyDiagram, (err) => {
        if (err) {
          console.error('Error importing BPMN diagram', err)
        }
      })
    }
  }
}
</script>

<style>
.bpmn-container {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
</style>
